<template>
  <div id="app-hlol-home-list">
    <div style="height: 100%">
      <a-row type="flex" justify="space-between" align="top">
        <div class="top-bar">
          <div class="game-v">HLOL - 当前游戏版本：{{this.game_version}}</div>
          <!-- <div class="game-v">英雄数量: ：{{hero_list.length}}</div> -->
          <!-- 单选列表 -->
          <div style="display: flex; flex-direction: column;">
            <a-radio-group
              v-model="radio_value"
              :options="options"
              default-value="all"
              @change="onChangeHeroType"
            />
            <div style="margin-top: 10px;"></div>
            <a-input-search placeholder="搜索您想找的英雄（支持别称搜索）" allow-clear @search="onSearch" />
          </div>
        </div>
      </a-row>
      <a-row type="flex" justify="space-between" align="top">
        <a-spin :spinning="spinning">
          <div class="h-list">
            <a-list
              :locale="{emptyText: '暂无英雄数据'}"
              :grid="{gutter: 20, xs: 1, sm: 2, md: 3, lg: 3, xl: 3, xxl: 3 }"
              :data-source="hero_list_show.slice((current - 1) * pageSize,current*pageSize)"
            >
              <a-list-item slot="renderItem" slot-scope="item, index" style="margin: 15px auto;">
                <a-card
                  hoverable
                  style="width: 250px"
                  @click="viewofHero(item.heroId)"
                  :key="index"
                >
                  <!-- <template slot="actions" class="ant-card-actions">
                  <audio controls="controls" style="width:250px">
                <source :src="item.selectAudio" type="audio/ogg" />Your browser does not support the audio element.
                  </audio>
                  </template>-->
                  <template #cover>
                    <div style="background-color: #ccb28c; height: 32px; width: 100%"></div>
                  </template>
                  <a-card-meta
                    :title="item.name"
                    :description="item.title+'('+item.changeLabel+')'"
                  >
                    <template #avatar>
                      <a-avatar
                        :size="48"
                        :src="'https://game.gtimg.cn/images/lol/act/img/skin/small'+(item.heroId * 1000).toString()+'.jpg'"
                      />
                    </template>
                  </a-card-meta>
                </a-card>
              </a-list-item>
            </a-list>
          </div>
        </a-spin>
      </a-row>
      <a-row class="page-bottom">
        <a-pagination
          v-model="current"
          style="margin: 20px auto;"
          simple
          :disabled="pageDisable"
          :page-size="pageSize"
          :total="hero_list_show.length"
          show-less-items
          @change="currentChange"
        />
      </a-row>
    </div>
  </div>
</template>
<script>
import { localApi } from "@/api/main";
const hero_list = [];
export default {
  data() {
    return {
      spinning: true,
      pageDisable: false,
      pageSize: 15,
      current: 1,
      radio_value: "all",
      options: [
        { label: "所有英雄", value: "all" },
        { label: "战士", value: "fighter" },
        { label: "法师", value: "mage" },
        { label: "刺客", value: "assassin" },
        { label: "坦克", value: "tank" },
        { label: "射手", value: "marksman" },
        { label: "辅助", value: "support" }
      ],
      hero_list: [],
      hero_list_show: [],
      game_version: "00.00",
      type: 1
    };
  },
  created() {},
  mounted() {
    if (this.hero_list.length == 0) {
      this.getHeroList()
    }
  },
  methods: {
    async onSearch(value) {
      this.spinning = true
      setTimeout(() => {
        if (!value) {
          this.hero_list_show = this.hero_list;
        } else {
          this.hero_list_show = this.hero_list.filter(
            item => item.keywords.indexOf(value) != -1
          );
        }
        this.current = 1
        this.spinning = false
      }, 200);
    },
    async currentChange(current) {
      this.spinning = true
      this.pageDisable = true
      setTimeout(() => {
        this.current = current
        this.spinning = false
        this.pageDisable = false
      }, 200);
    },
    onChangeHeroType(e) {
      this.spinning = true
      this.pageDisable = true
      setTimeout(() => {
        this.spinning = false
        this.pageDisable = false
      }, 200);
      if (e.target.value == "all") {
        this.hero_list_show = this.hero_list;
      } else {
        this.hero_list_show = this.hero_list.filter(
          item => item.roles.indexOf(e.target.value) != -1
        )
      }
      this.current = 1
      // console.log("radio1 checked", e.target.value)
    },
    exec(id) {
      const params = {
        id: id
      };
      localApi("testElectronApi", params)
        .then(res => {
          if (res.code !== 0) {
            return false
          }
        })
        .catch(err => {
          console.log("err:", err)
        })
    },
    viewofHero(hid) {
      this.$router.push({ name: "heroDetail", params: { hid: hid } })
    },
    async getHeroList() {
      let that = this
      const hurl =
        "https://game.gtimg.cn/images/lol/act/img/js/heroList/hero_list.js"
      fetch(hurl)
        .then(response => response.json())
        .then(data => {
          that.game_version = data.version
          that.hero_list = data.hero
          that.hero_list_show = data.hero
          // console.log(this.hero_list_show)
          that.spinning = false
          return data.hero
          // console.log(data)
        })
        .catch(console.error)
    }
  }
}
</script>
<style lang="less" scoped>
#app-hlol-home-list {
  padding: 0px 10px;
  text-align: left;
  width: 100%;
  overflow: hidden;
  .one-block-1 {
    font-size: 16px;
    padding-top: 10px;
  }
  .one-block-2 {
    padding-top: 10px;
  }
}

.page-bottom {
  height: 60px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  text-align: right;
  // background-color: #ffffff;
  border-top: 2px solid rgba(216, 216, 216, 0.438);
}

/deep/ .ant-radio-wrapper {
  color: #ffffff;
}

.h-list {
  // display: flex;
  // justify-content: flex-start;
  box-sizing: border-box;
  height: 500px;
  flex-wrap: wrap;
  overflow: overlay;
  overflow-x: hidden;
  -webkit-user-select: none; /*webkit浏览器*/
}

.card-container {
  background: #ececec;
  // padding: 30px;
  display: flex;
}

.top-bar {
  background-color: #b89660;
  height: 100px;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.hero-card {
  width: auto;
  height: 126.8px;
  margin: 10px auto;
  display: flex;
  justify-content: flex-start;
  // overflow: scroll !important;
}

.game-v {
  display: flex;
  align-items: center;
  color: #ffffff;
  font-size: 18px;
}
</style>
